<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="icon" href="img/logo/logo.jpg" sizes="32*32">
	<title>用户登录</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		/* 主模块 背景图片样式 */
		.sever {
			height: 360px;
			width: 100%;
			margin-top: 80px;
			background-image: url(img/reg/1.reg_background.jpeg);
			background-size: 100% auto;
			background-position: 0px -950px;
			padding-top: 40px;
		}
		/* 版心样式 */
		.center {
			width: 500px;
			background-color: rgba(0,0,0,.6);
			border: solid 1px rgba(0, 0, 0, 0);
			border-radius: 20px;
			margin: 40px 0 0 60%;	
		}
		/* 页头样式 */
		.logo>img{
			position: relative;
			display: block;
			float: left;
			width: 90px;
			top: 40px;
			left: 80px;
		}
		.logo_all>.logo_name{
			display: block;
			/* float: left; */
			position: relative;
			width: 500px;
			top: 60px;
			left: 90px;
			font-size: 50px;
			font-family: '楷体';
		}
		.logo_all>.logo_reg{
			display: block;
			width: 500px;
			position: relative;
			font-size: 30px;
			left: 300px;
			top: 13px;
			font-size: 40px;
			font-family: '宋体';
		}
		/* 登录框头部样式 */
		.title {
			height: 50px;
		}
		.title>.title_left {
			display: block;
			box-sizing: border-box;
			padding: 0 0 0 100px;
			float: left;
			/* padding-right: 200px; */
			width: 275px;
			height: 27px;
			font-size: 20px;
			margin: 20px 0;
			color: white;
		}
		
		.center>.title>.title_right {
			display: block;
			box-sizing: border-box;
			float: right;
			padding: 10px 0 0 0;
			width: 175px;
			height: 27px;
			/* padding-left: 200px; */
			font-size: 10px;
			margin: 20px 50px 20px 0;
			/* vertical-align: bottom; */
			text-decoration: none;
			color: rgba(255,255,255,1);
		} 
		.center>.title>.title_right>a{
			text-decoration: none;
			color: #3fb6f9;
			font-size: 13px;
		}
		/* 输入框及周边样式 */
		.center>.reg_input>.tips_top {
			display: block;
			box-sizing: border-box;
			padding: 3px 0;
			width: 80px;
			float: left;
			height: 30px;
			text-align: right;
			/* vertical-align: middle; */
			margin: 5px 0 15px 15px;
			color: white;
		}
		.center>.reg_input>input {
			display: block;
			width: 166px;
			float: left;
			padding: 5px 0 5px 3px;
			margin: 5px 0;
			outline: none;
		}
		.center>.reg_input>.tips_down {
			display: block;
			box-sizing: border-box;
			font-size: 13px;
			padding: 5px 0;
			border: 1px solid rgba(0, 0, 0, 0);
			width: 198px;
			float: left;
			height: 30px;
			margin: 5px 0 15px 10px;
			color: white;
		}
			
		/* 登录按钮样式 */
		.reg_btn>.btn{
			display: block;
			float: left;
			margin: 10px 60px 30px 100px;
			width: 160px;
			height: 26px;
		}
		
		/* 去除浮动影响 */
		.center::after {
			content: '';	
			display: block;
			clear: both;
		}
		
	</style>
</head>
<body>
	
	<div class="logo_all">
		<div class="logo"><img src="img/logo/logo.jpg"></div>
		<h1 class="logo_name">小俊美食</h1>
		<span class="logo_reg">请登录:</span>
	</div>
	<div class="sever">
		<div class="center">
				<div class="title">
					<span class="title_left">登录小俊美食</span>
					<span class="title_right">
						还没有账号
						<a href="./reg.html">点击注册</a>
					</span>
				</div>
				
				<div class="reg_input">
					<span class="tips_top">用户名：</span>
					<input type="text" id="uname" placeholder="请输入用户名" class="reg_into">
					<span id="msg_name" class="tips_down"></span>
				</div>
				
				<div class="reg_input">
					<span class="tips_top">密码：</span>
					<input type="password" id="upwd" placeholder="请输入密码" class="reg_into">
					<span id="msg_pwd" class="tips_down"></span>
				</div>
				
				<div class="reg_btn">
					<span id="msg"></span>
					<div id="reg"></div>
					<input type="button" id="btn" value="登录" class="btn">
				</div>	
				
			</div>
			
		</div>
	
	
	

	<script type="text/javascript">
		btn.onclick = function(){
			let xhr	= new XMLHttpRequest()
			xhr.open("GET",`/v2/user/login?uname=${uname.value}&upwd=${upwd.value}`)
			xhr.onload = function(){
				let result = xhr.responseText
				console.log(result)
				if( result == 'Login success' )
					msg.innerHTML = '登陆成功'
				else{
					msg.innerHTML = '登陆失败'
					var board = document.getElementById("reg")
					var e = document.createElement("span")
					e.href = "./reg.html"
					e.id = `food_reg`
					var object = board.appendChild(e)
					food_reg.innerHTML = "账号或密码错误"
				}
			}
			xhr.send()
		}
	</script>
</body>
</html>